import styled from 'styled-components';
import React, { CSSProperties, useState, useEffect } from 'react';

import { MetaDataObjectCompositionPanel } from './object-composition-panel';
import { MetaDataObjectPropertisPanel } from './object-properties-panel';
import { MetaDataObjectAggregationPanel } from './object-aggregation-panel';
import { MetaDataObjectInheritPanel } from './object-inherit-panel';
import { MetaDataObjectTraitsPanel } from './object-traits-panel';

export type MainMetaDataObjectAction = '属性' | '归属' | '聚合' | string;

export interface MainMetaDataObjectPanelProps {
    style?: CSSProperties;
    action: MainMetaDataObjectAction;
    objectIdentifier: string;
}

export const MainMetaDataObjectPanel: React.FC<MainMetaDataObjectPanelProps> = (props) => {

    return (
        <>
            <MetaDataObjectPropertisPanel style={props.action === '属性' ? props.style : { ...props.style, display: 'none' }} objectIdentifier={props.objectIdentifier}></MetaDataObjectPropertisPanel>
            {/* <MetaDataObjectCompositionPanel style={props.action === '归属' ? props.style : { ...props.style, display: 'none' }} objectIdentifier={props.objectIdentifier}></MetaDataObjectCompositionPanel>
            <MetaDataObjectAggregationPanel style={props.action === '聚合' ? props.style : { ...props.style, display: 'none' }} objectIdentifier={props.objectIdentifier}></MetaDataObjectAggregationPanel>
            <MetaDataObjectInheritPanel style={props.action === '继承' ? props.style : { ...props.style, display: 'none' }} objectIdentifier={props.objectIdentifier}></MetaDataObjectInheritPanel> */}
            {
                props.action === '特性' && <MetaDataObjectTraitsPanel objectIdentifier={props.objectIdentifier}></MetaDataObjectTraitsPanel>
            }
        </>
    );
}
